<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <style type="text/css">
        .aui-list .aui-list-item-media {
            width: 3rem;
        }
        .notes-add {
            position: fixed;
            left: 0.5rem;
            bottom: 0.5rem;
            width: 3rem;
            z-index: 99;
        }
        textarea {
            height: 10rem;
            background-color: #ffffff;
            padding: 0.5rem;
        }

        .file-upload{ float: left; width: 3rem; height: 3rem; margin-top: .8rem; margin-left: .8rem; text-align: center;line-height: 3rem; overflow: hidden; position: relative; }
        .delete-btn {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 28px;
            height: 28px;
            line-height: 28px;
            background-color: rgba(0,0,0,0.6);
            margin-left: -14px;
            margin-top: -14px;
            color: #fff;
            text-align: center;
            border-radius: 50%;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <section class="aui-content-padded">
        <textarea id="daily_content_id"
         placeholder="在这里输入汇报内容..."></textarea>
    </section>
    <section class="aui-content-padded">
      <ul class="aui-list aui-form-list aui-margin-t-15">
          <li class="aui-list-item">
              <div class="aui-list-item-inner">
                  <div class="aui-list-item-label">
                      上传附件：
                  </div>
              </div>
          </li>
          <li style="height: 4.6rem;">
              <div id="imgUpload">
                  <!-- <div class="aui-border aui-text-center file-upload"><img src="../image/demo1.png" alt=""></div>
                  <div class="aui-border aui-text-center file-upload"><img src="../image/demo1.png" alt=""></div>
                  <div class="aui-border aui-text-center file-upload"><img src="../image/demo1.png" alt=""></div> -->
              </div>
              <div class="aui-border aui-text-center file-upload" style="color: #999;" onclick="openPicture()" id="addSelect">
                  <i class="aui-iconfont aui-icon-plus"></i>
              </div>
          </li>
      </ul>
    </section>
    <section class="aui-content">
        <ul class="aui-list aui-list-in aui-margin-b-15">
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">
                        类型:
                    </div>
                    <div class="aui-list-item-input">
                        <select id="daily_type_id">
                            <option value="1">日报</option>
                            <option value="2">周报</option>
                            <option value="3">月报</option>
                            <option value="4">其他</option>
                        </select>
                    </div>
                </div>
            </li>
        </ul>
        <ul class="aui-list aui-form-list aui-margin-b-15">
            <li class="aui-list-item" onclick="openWin('daily_mail');">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label-icon">
                        <i class="aui-iconfont aui-icon-my"></i>
                    </div>
                    <div class="aui-list-item-input">
                        <input type="text" readonly="readonly" id="users_id" placeholder="请选择抄送成员" onclick="openWin('daily_mail')">
                    </div>
                </div>
            </li>
        </ul>
    </section>
</body>
<script type="text/javascript" src="../script/zepto.min.js" ></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/aui-actionsheet.js" ></script>
<script type="text/javascript">
    apiready = function(){
        $("#daily_content_id").focus()
        api.parseTapmode();
    }
    var actionsheet = new auiActionsheet();
    //打开底部弹窗
    var imgNumber = 0;

    // 增加Array对象中remove方法
    Array.prototype.indexOf = function(val) {
        for (var i = 0; i < this.length; i++) {
            if (this[i] == val) return i;
        }
        return -1;
    };
    Array.prototype.remove = function(val) {
        var index = this.indexOf(val);
        if (index > -1) {
            this.splice(index, 1);
        }
    };
    var path = new Array();
    apiready = function(){

    };

    // 打开相册
    function openPicture() {
        var UIMediaScanner = api.require('UIMediaScanner');
        UIMediaScanner.open({
            type: 'picture',
            column: 4,
            classify: true,
            max: 4-imgNumber,
            sort: {
                key: 'time',
                order: 'desc'
            },
            texts: {
                stateText: '已选择*项',
                cancelText: '取消',
                finishText: '完成'
            },
            styles: {
                bg: '#fff',
                mark: {
                    icon: '',
                    position: 'bottom_left',
                    size: 20
                },
                nav: {
                    bg: '#eee',
                    stateColor: '#000',
                    stateSize: 18,
                    cancelBg: 'rgba(0,0,0,0)',
                    cancelColor: '#000',
                    cancelSize: 18,
                    finishBg: 'rgba(0,0,0,0)',
                    finishColor: '#000',
                    finishSize: 18
                }
            },
            scrollToBottom: {
                intervalTime: 3,
                anim: true
            },
            exchange: true,
            rotation: true
        }, function(ret) {
            if (ret.list) {
                imgNumber += ret.list.length;
                if (imgNumber >= 4) $('#addSelect').css({'display': 'none'});
                var str = '';
                for (var i = 0; i < ret.list.length; i++) {
                    path.push(ret.list[i].path);
                    str += '<div class="aui-border aui-text-center file-upload" data="aaa">';
                    str += '    <img src="'+ret.list[i].path+'">';
                    str += '    <div class="delete-btn" onclick="delPicture(this)">'
                    str += '        <i class="aui-iconfont aui-icon-trash"></i>'
                    str += '    </div>'
                    str += '</div>';
                }
                $('#imgUpload').append(str);
            }
        });
    }

    // 删除预览图片
    function delPicture(obj) {
        // alert(obj)
        var div = $(obj).parent();
        var img = $(div).children('img');
        var imgSrc = $(img).attr('src');
        path.remove(imgSrc);
        // alert(img)
        // alert($(img).attr('src'))
        $(div).remove();
        imgNumber--;
        // alert(imgNumber)
        // alert(path)
        if (imgNumber < 4) $('#addSelect').css({'display': 'block'});
    }

    function openWin(name) {
        api.openWin({
            name: name,
            url: name+'_win.html',
            pageParam: {
                winName: "daily",
                frameName:"daily_frm"
            }
        });
    }

    function selectUsers(val){
        $("#users_id").val(val);
    }

    function addDaily(){
        var daily_content = $('#daily_content_id').val();
        var view_user = $('#users_id').val();
        var username = $api.getStorage('username');
        var daily_type = $("#daily_type_id").val();

        if(daily_content && view_user && daily_type){
            //执行AJAX
            api.showProgress({
                style: 'default',
                animationType: 'fade',
                title: '拼命发送中...',
                text: '不如喝茶去...',
                modal: false
            });

            api.ajax({
                url: ServeUrl + 'm=Daily&a=addDaily',
                method: 'post',
                cache : false,
                    timeout : 30,
                    dataType : 'json',
                data: {
                    values: {
                        daily_content : daily_content,
                        view_user : view_user,
                        username : username,
                        daily_type:daily_type
                    },
                    files: {
                        file0: path[0], // 最多四个 没有就空着
                        file1: path[1],
                        file2: path[2],
                        file3: path[3],
                    },
                }
            },function(ret, err){
                api.hideProgress();
                if (ret) {
                    api.toast({
                        msg:ret.data.msg
                    });
                    //关闭指定window，若待关闭的window不在最上面，则无动画
                    api.closeWin();
                }else{
                    api.toast({
                        msg:'未知错误'
                    });
                }

            });
        }else {
            api.toast({
                msg:'请完善汇报信息'
            });
        }


    }



</script>

</html>
